//  和用户有关的功能
import usersView from "@/users.ejs";

// 引入api模块
import axios from "../api/index.js";

export default function (router) {
  router.route("/admin/users", (req, res) => {
    res.render(usersView());

    //  点击添加用户：
    //  1.点击添加用户按钮，显示添加用户对话框
    let addUserBtn = document.querySelector(".adduer");
    //  获取添加的对话框
    let adduermodelEle = document.querySelector(".adduermodel");
    //  获取遮罩层：
    let maskEle = document.querySelector(".mask");

    addUserBtn.onclick = function () {
      console.log("点击了");

      //  点击添加按钮的时候让对话框和遮罩层显示出来：
      adduermodelEle.style.display = "block";
      maskEle.style.display = "block";
    };

    // 2.点击x关闭对话框
    let closebtnEle = document.querySelector(".closebtn");
    closebtnEle.onclick = function () {
      adduermodelEle.style.display = "none";
      maskEle.style.display = "none";
    };

    // 3.点击提交按钮提交用户信息到后端
    let imgFileEle = document.querySelector(".imgFile");
    imgFileEle.onchange = function () {
      console.log("发生改变了");
      //  获取上传图片对象
      let imgObj = this.files[0];
      let file = new FileReader();
      //  把图片对象转成url形式的数据，base64格式
      file.readAsDataURL(imgObj);
      //  需要在file读完数据之后获取base64
      file.onload = function () {
        console.log(file.result);
        //  创建img标签，把base64
        let myimg = new Image();
        myimg.src = file.result;
        // 把图片对象添加到html里
        myimg.style.width = "100px";
        myimg.style.height = "100px";
        let imgshowEle = document.querySelector(".imgshow");
        //  清空显示的内容
        imgshowEle.innerHTML = "";
        imgshowEle.appendChild(myimg);
      };
    };

    //  4 .点击提交按钮的时候发送ajax
    let submitBtn = document.querySelector(".btn");
    let usernameEle = document.querySelector(".username");
    let pwdEle = document.querySelector(".pwd");
    submitBtn.onclick = async function () {
      let username = usernameEle.value;
      let pwd = pwdEle.value;
      // let repeatpwd = repeatpwdEle.value;
      // 获取文件对象
      let imgfile = imgFileEle.files[0]; // 文件对象
      // console.log(username, pwd, imgfile);

      //  表单的校验
      if (username == "") {
        return alert("用户名不能为空");
      }
      if (pwd == "") {
        return alert("密码不能为空");
      }
      //  两次输入的密码要一致
      let repeatpwdEle = document.querySelector(".repeatpwd");
      let repeatpwd = repeatpwdEle.value;
      if (pwd !== repeatpwd) {
        return alert("两次输入的密码不同");
      }

      //  文件不能是undefined
      if (typeof imgfile == "undefined") {
        return alert("图像不能为空");
      }
      // 借助formDate预定义类
      let form = new FormData(); // 模拟一个空的form表单
      form.append("username", username);
      form.append("pwd", pwd);
      form.append("myimg", imgfile);
      console.log(form);
      // 把form直接当成数据提交给后端
      let res = await axios.post("/user/adduser", form);
      console.log(res);
      console.log("点击了提交按钮");
      // let res = await axios.get("/user/getdata");
      // console.log(res);
    };

    // 获取用户名和密码
  });
}
